<!-- 出口变化趋势 -->
<template>
  <div class="content-exportchange">
    <div class="title"></div>
    <div class="minpng">
      <div class="content">
        <div ref="content1" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "exportchange",
  data() {
    return {
      option: {
        title: {
          text: "%",
          top: "2%",
          left: "5%",
          textStyle: {
            //文字颜色
            color: "#8FB9FF",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "lighter",
            //字体系列
            fontFamily: "NotoSansHans",
            //字体大小
            fontSize: 12,
          },
        },
        // 十字指针
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "11%",
          top: "13%",
          right: "10%",
          bottom: "15%",
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#0B427A",
              width: 1,
            },
          },
          axisLabel: {
            //  是否显示坐标刻度标签(这了指是否显示x轴上的月份)
            show: true,
            // 标签文字的颜色
            color: "#8FB9FF",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "lighter",
            //字体系列
            fontFamily: "NotoSansHans",
            //字体大小
            fontSize: 12,
          },
          //x轴刻度线设置
          axisTick: {
            show: false,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        },
        yAxis: {
          type: "value",
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 1,
              color: "#0B427A",
            },
            show: true, //隐藏或显示
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#0B427A ",
              width: 1,
            },
          },
          axisLabel: {
            //  是否显示坐标刻度标签(这里指是否显示y轴上的数值)
            show: true,
            // 标签文字的颜色
            color: "#8FB9FF",
            interval: "auto",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "lighter",
            //字体系列
            fontFamily: "NotoSansHans",
            //字体大小
            fontSize: 12,
          },
          //y轴刻度线设置
          axisTick: {
            show: false,
          },
          // boundaryGap: false,
        },

        series: [
          {
            data: [10, 43, 55, 22, 44, 32, 56, 46, 92, 80, 57, 92],
            type: "line",
            lineStyle: {
              color: "#00C6FB",
              width: 1,
            },
            markArea: {
              //设置具体区域的背景颜色，选择不同区间 设置图表对应的背景颜色
              silent: true,
              data: [
                [
                  { xAxis: "1",itemStyle: { color: "rgba(16, 61, 102, .3)" } },
                  { xAxis: "2" },
                ],
                [
                  { xAxis: "2", itemStyle: { color: "rgba(20, 52, 75, .2)" } },
                  { xAxis: "3" },
                ],
                 [
                  { xAxis: "3",itemStyle: { color: "rgba(16, 61, 102, .3)" } },
                  { xAxis: "4" },
                ],
                [
                  { xAxis: "4", itemStyle: { color: "rgba(20, 52, 75, .2)" } },
                  { xAxis: "5" },
                ],
                 [
                  { xAxis: "5",itemStyle: { color: "rgba(16, 61, 102, .3)" } },
                  { xAxis: "6" },
                ],
                [
                  { xAxis: "6", itemStyle: { color: "rgba(20, 52, 75, .2)" } },
                  { xAxis: "7" },
                ],
                 [
                  { xAxis: "7",itemStyle: { color: "rgba(16, 61, 102, .3)" } },
                  { xAxis: "8" },
                ],
                [
                  { xAxis: "8", itemStyle: { color: "rgba(20, 52, 75, .2)" } },
                  { xAxis: "9" },
                ],
                 [
                  { xAxis: "9",itemStyle: { color: "rgba(16, 61, 102, .3)" } },
                  { xAxis: "10" },
                ],
                [
                  { xAxis: "10", itemStyle: { color: "rgba(20, 52, 75, .2)" } },
                  { xAxis: "11" },
                ],
                [
                  { xAxis: "11", itemStyle: { color: "rgba(16, 61, 102, .3)" } },
                  { xAxis: "12" },
                ],
               
              ],
            },

            symbol: "circle",
            itemStyle: {
              normal: {
                // 拐点上显示数值
                // label: {
                //   show: true,
                //   color: "#00C6FB",
                // },
                color: "#00C6FB", // 拐点边框颜色
              },
            },

            areaStyle: {
              //区域填充渐变颜色
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,198,251,0.7)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,198,251,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
          //   {
          //     data: [100, 0, 100, 0, 100, 0, 100, 0, 100, 0, 100, 0],
          //     barCategoryGap: "10%",
          //     type: "bar",
          //     areaStyle: {},
          //     boundaryGap: false,
          //     itemStyle: {
          //       color: "rgba(16, 61, 102, .3)",
          //     },
          //   },
        ],
      },
    };
  },
  mounted() {
    this.initExportChange();
  },
  methods: {
    initExportChange() {
      this.$nextTick(function () {
        let exportChange = this.$echarts.init(this.$refs.content1);
        exportChange.setOption(this.option, true);

        window.addEventListener("resize", () => {
          exportChange.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
.content-exportchange {
  background: url("~@/wood/images/patr-3.png")
    no-repeat;
  background-size: 100% 100%;
  height: 31.7vh;
  padding-top: 5%;
  
  
}
.content-exportchange .title {
    background: url("~@/wood/images/title4.png")
      no-repeat;
    background-size: 100% 100%;
    width: 51%;
    height: 13%;
    margin-left: 4%;
  }
  .content-exportchange .minpng {
    width: 100%;
    height:  calc(100% - 40px);;
    
  }
  .content-exportchange .minpng  .content {
      height: 100%;
    }
</style>